<!--
 * @Author: doing
 * @Date: 2023-08-10 09:52:55
 * @LastEditors: git config user.name && git config user.email
 * @LastEditTime: 2023-08-18 11:41:06
 * @FilePath: \线狮少年\src\layouts\components\FMenu.vue
 * @Description: 
 * 首页左侧菜单栏
 * Copyright (c) 2023 by 1540265624@qq.com, All Rights Reserved. 
-->
<template>
  <div class="f-menu" :style="{ width:$store.state.asideWidth }">
      <el-menu :default-active="defaultActive" unique-opened :collapse="isCollapse" default-active="2" class="border-0" @select="handleSelect" :collapse-transition="false">

          <template v-for="(item,index) in asideMenus" :key="index">
              <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.name">
                  <template #title>
                      <el-icon>
                          <component :is="item.icon"></component>
                      </el-icon>
                      <span>{{ item.name }}</span>
                  </template>
                  <el-menu-item v-for="(item2,index2) in item.children" :key="index2" :index="item2.url">
                      <el-icon>
                          <component :is="item2.icon"></component>
                      </el-icon>
                      <span>{{ item2.name }}</span>
                  </el-menu-item>
              </el-sub-menu>

              <el-menu-item v-else :index="item.url">
                  <el-icon>
                       <component :is="item.icon"></component>
                  </el-icon>
                  <span>{{ item.name }}</span>
              </el-menu-item>
          </template>
      </el-menu>
  </div>
</template>
<script setup>
import { computed,ref } from 'vue';
import { useRouter,useRoute,onBeforeRouteUpdate } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter()
const store = useStore()
const route = useRoute()



// 默认选中
const defaultActive = ref(route.path)

//监听路由变化,这样才能根据路由来高亮菜单
onBeforeRouteUpdate((to,from)=>{
    defaultActive.value = to.path
})

// 是否折叠
const isCollapse = computed(()=> !(store.state.asideWidth === '250px'))

const asideMenus = computed(()=>store.state.menuList)

const handleSelect = (e)=>{
  router.push(e)
}
</script>
<style>
.f-menu {
  transition: all 0.2s;
  top: 64px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  @apply shadow-md fixed bg-light-50;
}
.f-menu::-webkit-scrollbar{
  width: 0px;
}
</style>